<template>
  <div class="app-container" v-loading="loading" style="overflow-x: hidden">
    <div class="headerINfo">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="任务ID" prop="taskRecordDetailId">
            {{ mainData.taskRecordDetailId }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="任务名称" prop="taskName">
            <span @click="taskDetail" style="color: #0044a0; cursor: pointer">
              {{ mainData.taskName }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="任务类型" prop="taskType">
            <DictTag :value="mainData.taskType" :options="task_template_type" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="执行人" prop="userNames">
            {{ mainData.userNames }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工厂" prop="factoryName">
            {{ mainData.factoryName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工段" prop="workshopName">
            {{ mainData.workshopName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产线" prop="productLineName">
            {{ mainData.productLineName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工艺段" prop="sectionName">
            {{ mainData.sectionName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="班次" prop="classesName">
            {{ mainData.classesName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="班组" prop="workGroupName">
            {{ mainData.workGroupName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务时间" prop="prodDate">
            {{ mainData.taskTimeStart + " - " + mainData.taskTimeEnd }}
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="bottomInfo">
      <el-col :span="6">
        <el-form-item label="当前状态" prop="status">
          <DictTag :value="mainData.status" :options="task_record_status" />
        </el-form-item>
      </el-col>
      <div class="time-line">
        <el-timeline :reverse="true">
          <el-timeline-item
            v-for="(activity, index) in list"
            :key="index"
            :color="activity.operateCode == 2 ? '#0044A0' : ''"
            size="large"
          >
            <div class="time">
              <div>
                <span class="year">
                  {{ activity.operateTime }}
                </span>
              </div>
            </div>
            <div class="ml10">
              <div class="list-title">
                <DictTag
                  style="display: inline-block"
                  :value="activity.operateCode"
                  :options="operate_code"
                />
                <span
                  @click="detailTask()"
                  v-if="activity.operateCode == 2"
                  style="color: #0044a0; cursor: pointer; font-size: 12px"
                >
                  &nbsp;&nbsp;&nbsp; 查看内容
                </span>
              </div>
              <div class="list-company">{{ activity.operateBy }}</div>
              <div class="list-desc">
                <DictTag
                  style="display: inline-block"
                  :value="activity.closeReason"
                  :options="shutdown_reason"
                />
                &nbsp;
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="activity.remark"
                  placement="top-start"
                >
                  <p style="max-width: 500px; display: inline-block;margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ activity.remark }}</p>
                </el-tooltip>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script setup name="changeShifts">
import { getExecuteList, listTaskRecordOperate } from "@/api/productionMgt/taskCenter";
import { ref } from "vue";
import { useAttrs, getCurrentInstance, toRefs, watch, onMounted } from "vue";
const attrs = useAttrs();
const { proxy } = getCurrentInstance();
const loading = ref(false);
const { task_template_type } = proxy.useDict("task_template_type");
const { task_record_status } = proxy.useDict("task_record_status");
const { operate_code } = proxy.useDict("operate_code");
const { shutdown_reason } = proxy.useDict("shutdown_reason");
import DataInfo from "./data";
import addData from "@/views/technology/taskTemplate/add.vue";
const listData = ref();
const emit = defineEmits(["close", "setTitle", "setActions", "setIsActionTop"]);
const actions = ref();
const mainData = ref({
  taskTimeStart: "",
  taskTimeEnd: "",
});
const baseInfo = ref();
const list = ref([]);
// 任务填报详情
function detailTask() {
  proxy.subPageNext(
    DataInfo,
    { title: "任务填报", data: { ...mainData.value, parentType: "add" } },
    () => {}
  );
}
function getDetail(id) {
  loading.value = true;
  getExecuteList(id).then((res) => {
    loading.value = false;
    baseInfo.value = res.data;
    baseInfo.value.forEach((item) => {
      if (item.taskRecordList && item.taskRecordList.length) {
        item.taskRecordList.forEach((info) => {
          if (listData.value.taskRecordDetailId == info.taskRecordDetailId) {
            // 根据id  找到 那一条时间段是应该显示的
            mainData.value = info;
          }
        });
      }
    });
  });
}

function cancel() {
  emit("close");
}
// 查看任务
function taskDetail() {
  const row = JSON.parse(JSON.stringify(mainData.value));
  row.id = row.taskTemplateId;
  proxy.subPageNext(addData, { title: "任务模板详情", data: row, type: "view" }, () => {});
}
function getTaskRecordDetail(taskRecordDetailId) {
  const obj = {
    pageNum: 1,
    pageSize: 1000,
    taskRecordDetailId: taskRecordDetailId,
  };
  listTaskRecordOperate(obj).then((res) => {
    console.log(res);
    list.value = res.rows || [];
  });
}

onMounted(async () => {
  const { data } = attrs;
  listData.value = data;
  if (data?.id) {
    getDetail(data.id || data.taskRecordId);
  }
  if (data?.taskRecordDetailId) {
    getTaskRecordDetail(data.taskRecordDetailId);
  }
  actions.value = [
    {
      text: "关 闭",
      theme: "",
      handle: () => {
        cancel();
      },
    },
  ];
  emit("setActions", actions.value);
});
</script>
<style lang="scss" scoped>
.headerINfo {
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 15px;
}
.time-line {
  margin-top: 50px;
  margin-left: 170px;
}
.list-title {
  font-size: 16px;
  font-family:
    PingFangSC-Medium,
    PingFang SC;
  font-weight: 500;
  color: #181b1e;
}
.list-company {
  font-size: 14px;
  font-family:
    PingFangSC-Regular,
    PingFang SC;
  font-weight: 400;
  color: #0044a0;
  margin-top: 15px;
  margin-bottom: 15px;
}
.list-desc {
  font-size: 14px;
  font-family:
    PingFangSC-Regular,
    PingFang SC;
  font-weight: 400;
  color: #596878;
}
//左侧时间
.time {
  color: #0044a0;
  position: absolute;
  left: -164px;
  top: 1px;
  .year {
    font-size: 14px;
    font-family:
      PingFangSC-Regular,
      PingFang SC;
    font-weight: 400;
    color: #20354a;
  }
  .day {
    font-size: 14px;
    font-family:
      PingFangSC-Regular,
      PingFang SC;
    font-weight: 400;
    color: #596878;
    text-align: center;
    margin-top: 10px;
  }
}
</style>
